import { useEffect, useRef } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import Slider from '@react-native-community/slider';
import { getTheme } from '../theme';
import { px2dp } from '../utils/pixel-adapter';


const theme = getTheme();

export function Player(props) {
    const el = useRef();

    useEffect(() => {
        el.current.measure((...data) => {
            console.log(data);
        });

    }, []);

    return (
        <View ref={el} style={[styles.container]}>
            <Slider
                style={styles.slider}
                minimumValue={0}
                maximumValue={1}
                minimumTrackTintColor="#fff"
                maximumTrackTintColor="rgba(82, 82, 91, 1)"
                thumbTintColor={theme.subcolor}
            />
            <View style={styles.playInfoBox}>
                <View style={styles.leftInfo}>
                    <View style={styles.avator} />
                    <View>
                        <Text style={styles.songTitle}>我记得</Text>
                        <Text style={styles.songAuthor}>赵雷</Text>
                    </View>
                </View>
                <View style={styles.ctrlBox}>
                    <Pressable style={({ pressed }) => {
                        return [styles.btnBox, pressed && styles.btnBoxPressed];
                    }}>
                        <Text style={[styles.ctrlBtnIcon]}>{'\ue860'}</Text>
                    </Pressable>

                    <Pressable style={({ pressed }) => {
                        return [styles.btnBox, styles.mLeft8, pressed && styles.btnBoxPressed];
                    }}>
                        <Text style={[styles.ctrlBtnIcon]}>{'\ue61c'}</Text>
                    </Pressable>
                    <Pressable style={({ pressed }) => {
                        return [styles.btnBox, styles.mLeft8, pressed && styles.btnBoxPressed];
                    }}>
                        <Text style={[styles.ctrlBtnIcon]}>{'\ue865'}</Text>
                    </Pressable>
                    <Pressable style={({ pressed }) => {
                        return [styles.btnBox, styles.mLeft8, pressed && styles.btnBoxPressed];
                    }}>
                        <Text style={[styles.ctrlBtnIcon]}>{'\ue607'}</Text>
                    </Pressable>
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        backgroundColor: 'rgba(24, 24, 27, 0.95)',
        paddingTop: 15,
        paddingBottom: 10,
    },
    playInfoBox: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 15,
    },
    leftInfo: {
        flex: 1,
        flexDirection: 'row',
    },
    avator: {
        width: px2dp(40),
        height: px2dp(40),
        borderRadius: px2dp(6),
        marginRight: px2dp(15),
        backgroundColor: '#fff',
    },
    songTitle: {
        color: '#fff',
        fontSize: px2dp(16),
    },
    songAuthor: {
        color: 'rgb(161, 161, 170)',
    },
    ctrlBox: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    btnBox: {
        width: px2dp(30),
        height: px2dp(30),
        borderRadius: px2dp(15),
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnBoxPressed: {
        backgroundColor: '#666',
    },
    mLeft8: {
        marginLeft: px2dp(8),
    },
    ctrlBtnIcon: {
        color: '#fff',
        fontFamily: 'iconfont',
    },
});